<template>
  <canvas id="canvas" />
</template>
<script>
import QRCode from 'qrcode'
export default {
  name: 'QRCodeForm',
  // eslint-disable-next-line vue/no-unused-components
  components: { QRCode },
  props: {
    qrCodeUrl: {
      type: String,
      required: true
    }
  },
  data() {
    return {
    }
  },
  mounted() {
    this.useqrcode();
  },
  methods: {
    useqrcode() {
      return new Promise((resolve, reject) => {
        var canvas = document.getElementById('canvas')
        QRCode.toCanvas(canvas, this.qrCodeUrl, function(error) {
          if (error) {
            this.$message.error('解析错误')
            reject()
          }
          resolve()
        })
      })
    },
    toImage() {
      return new Promise((resolve, reject) => {
        var canvas = document.getElementById('canvas')
        const dataURL = canvas.toDataURL('image/png');
        if (dataURL !== '') {
          resolve(dataURL)
          return
        }
        reject()
      })
    }
  }
}
</script>

<style scoped>

</style>
